<template>
    <div id="app" class="main_bg_color">
        <!-- <div class="openHelp"><i class="fa fa-lightbulb-o fa-lg"></i><span>帮助</span></div> -->
        <!--
        <div class="guideActionBox" v-if="isGuide">
          <div class="app_guide">
            <div class="app_guide_content">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助小助手：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text app_guide_1_text" v-if="guideData.guide_1">
                <p><b>《商品》菜单介绍：</b></p>
                <p>1. 您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
                <p>2. 用户能够更好的了解您所要售出的商品情况，是否打折，原价现价等</p>
                <p>3. 也可以在此页面中关注您，这样您将可以对关注您的客户进行管理，例如发送私信，查看本月新增客户，总计客户等</p>
              </div>
              <div class="app_guide_text app_guide_2_text" v-if="guideData.guide_2">
                <p><b>《服务卡》菜单介绍：</b></p>
                <p>1. 您可以将您要销售的服务卡类商品在此向客户展示</p>
                <p>2. 用户能够更好的了解您所要售出的商品情况，是否打折，原价现价等</p>
                <p>3. 也可以在此页面中关注您，这样您将可以对关注您的客户进行管理，例如发送私信，查看本月新增客户，总计客户等</p>
              </div>
              <div class="app_guide_text app_guide_3_text" v-if="guideData.guide_3">
                <p><b>《我的》菜单介绍：</b></p>
                <p>1. 您可以将您要销售的服务卡类商品在此向客户展示</p>
                <p>2. 用户能够更好的了解您所要售出的商品情况，是否打折，原价现价等</p>
                <p>3. 也可以在此页面中关注您，这样您将可以对关注您的客户进行管理，例如发送私信，查看本月新增客户，总计客户等</p>
              </div>
            </div>
            <img class="app_guide_img app_guide_1_img" v-if="guideData.guide_1" src="static/images/jiantou_zuo_xia.png" />
            <img class="app_guide_img app_guide_2_img" v-if="guideData.guide_2" src="static/images/jiantou_you_xia2.png" />
            <img class="app_guide_img app_guide_3_img" v-if="guideData.guide_3" src="static/images/jiantou_you_xia2.png" />
            <div class="app_guide_border app_guide_1_border" v-if="guideData.guide_1"></div>
            <div class="app_guide_border app_guide_2_border" v-if="guideData.guide_2"></div>
            <div class="app_guide_border app_guide_3_border" v-if="guideData.guide_3"></div>
          </div>
        </div>
        -->
      <div class="app_content" :style="{bottom:appTabContentBottomValue}">
        <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
          <!--<keep-alive>-->
            <router-view />
          <!--</keep-alive>-->
        </transition>
      </div>
      <div class="app_tab" v-if="isTabShow">
        <div class="app_tab_item" @click="tabMenuClick(item.tabIndex,item.tabPath)" :v-key="item.tabIndex" v-for="item in tabMenuData">
          <!--<div class="app_tab_item_icon" :class="{selected : item.tabIsSelected}"><i :class="['fa','fa-'+item.tabIconSrc,'fa-lg']"></i><div class="app_tab_badge" v-if="item.tabBadge > 0">{{item.tabBadge}}</div></div>-->
          <div class="app_tab_item_icon" :class="{selected : item.tabIsSelected}"><img :src="item.tabIsSelected ? item.tabIconImg1 : item.tabIconImg"/></div>
          <div class="app_tab_item_text" :class="{selected : item.tabIsSelected}">{{item.tabName}}</div>
        </div>
      </div>
    </div>
</template>
 
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data(){
    return {
      isGuide   : false,
      guideData : {
        guide_1 : true,
        guide_2 : false,
        guide_3 : false
      },
      nowGuideIndex : 0
    }
  },
  components: {
    
  },
  created(){

      var initLoading = document.getElementById('initLoading');
      if(initLoading != null){
        document.body.removeChild(initLoading);
      }
      
  },

  mounted() {

    this.isGuide = false;

	//初始化底部菜单
	if((this.$userData.getIsManager() == 0 && this.$userData.getOsType() != 0) || this.$userData.getOsType() == 2 || this.$userData.getOsType() == 3){
	    //更新底部tab
	    this["AppModule/updateTabNumber"](this.tabMenuData2);
    }else{
    	//更新底部tab
    	this["AppModule/updateTabNumber"](this.tabMenuData1);
    }
    //初始化选中菜单
    this["AppModule/initTabMenu"](this.$localData.getNowTabIndex());
 
  },
  computed: {
    ...mapState({
      tabMenuData              : state => state.AppModule.tabMenuData,
      direction                : state => state.AppModule.direction,
      isTabShow                : state => state.AppModule.isTabShow,
      nowSelectedTabIndex      : state => state.AppModule.nowSelectedTabIndex,
      appTabContentBottomValue : state => state.AppModule.appTabContentBottomValue + "px",
      isShopGuide              : state => state.ShopIndexModule.isShopGuide,
	  tabMenuData1              : state => state.AppModule.tabMenuData1,
	  tabMenuData2              : state => state.AppModule.tabMenuData2,

    })
  },
  methods : {
    ...mapMutations(["AppModule/updateNowSelectedTabIndex"]),
    ...mapMutations(["AppModule/initTabMenu"]),
    ...mapMutations(["AppModule/updateIsShowAppGuide"]),
    ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
    ...mapMutations(["AppModule/updateTabNumber"]),
    ...mapMutations(["HomeModule/updateTempSell"]),
    ...mapMutations(["HomeModule/updateTempSellName"]),

    tabMenuClick(index,url){

      //选中当前tab
      this["AppModule/updateNowSelectedTabIndex"](index);
      
      //清理首页切换销售记录
      if(index != 0){
    	  this["HomeModule/updateTempSell"]('');
	      this["HomeModule/updateTempSellName"]('');
      }
      
      this.$router.push({
        path : url
      });

    },

    nextGuideClick(idx){

      this.nowGuideIndex = idx = ( idx >= 3 ? 0 : idx ) == 0 ? 0 : this.nowGuideIndex;
      for(var k in this.guideData){
        this.guideData[k] = false;
      }
      this.guideData['guide_' + (idx + 1)] = true;

    },

    closeGuideClick(){
      this.isGuide = false
      this["AppModule/updateIsShowAppGuide"](false)
      this["ShopIndexModule/updateIsShopGuide"](true)
    }
  }
};
</script>

<style lang="stylus" scoped>

  .app_guide {

    .app_guide_content {
      width 80%
      height 215px
      bottom 110px
      left 10%
    }

    .app_guide_border {
      width 60px
      height 50px;
      bottom 0px
    }

    .app_guide_1_border {
      left 32px

    }

    .app_guide_2_border {
      left 158px
    }

    .app_guide_3_border {
      left 282px
    }


    .app_guide_1_img {
        left 50px  
    }

    .app_guide_2_img {
        left 150px  
    }

    .app_guide_3_img {
        left 275px  
    }
  }


  #app {
      width 100%
      height 100%
      position relative
  }

  .app_tab {
    width 100% 
    height 50px 
    background #fff
    border-top 1px solid #ddd 
    position absolute
    bottom 0px
    display flex
  }

  .app_content {
    width 100%
    position absolute
    top 0px
    bottom 49px
    background #fff
    overflow hidden
  }

  .app_tab_item {
    /*width 33.333333%*/
    flex 1
    height 49px
    line-height 49px
    color #fff
    float left
    padding-top 3px

    .app_tab_badge {
      position absolute
      top 2px
      right 24%
      border-radius 9px
      color #fff
      width 18px
      height 18px
      background red
      text-align center
      line-height 16px
      font-size 12px
    }

    .app_tab_item_icon {
      width 100%
      text-align center
      position relative
      height 25px
      font-size 16px
      line-height 25px
      color #bfbfbf
    }

    .app_tab_item_icon img{
      height 20px
      padding-top: 5px;
    }

    .app_tab_item_icon.selected {
      color #fbd415
    }

    .app_tab_item_text {
      width 100%
      height 20px
      text-align center;
      line-height 20px
      font-size 10px
      color #bfbfbf
      font-weight: bold;
    }

    .app_tab_item_text.selected {
      color #000
      font-weight: bold;
    }
  }
  
</style>


